<template>
  <!-- 这里要先检查food对象是否有内容,确保它不是undefined才行,否则下面food.count报错 -->
  <div class="cart-control" v-if="food">
    <transition name="scroll">
      <i
        class="iconfont icon-jianshao"
        v-show="food.count"
        @click="changeFoodCount(false)"
      ></i>
    </transition>
    <span class="food-number" v-show="food.count">{{ food.count }}</span>
    <i class="iconfont icon-zengjia" @click="changeFoodCount(true)"></i>
  </div>
</template>

<script>
export default {
  props: {
    food: Object,
  },
  mounted() {
    // console.log(this.food)
  },
  methods: {
    changeFoodCount(isPlus) {
      this.$store.dispatch("changeFoodCount", { isPlus, food: this.food })
    },
  },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.cart-control {
  display: flex;
  align-items: center;
  .iconfont {
    font-size: 2.4rem;
    color: @theme-color;
  }
  .food-number {
    font-size: 1.4rem;
    color: #93999f;
    margin: 0 0.8rem;
  }
}

.scroll-enter-active,
.scroll-leave-active {
  transition: 0.35s;
}
.scroll-enter,
.scroll-leave-to {
  transform: translateX(2rem) rotate(180deg);
  opacity: 0;
}
</style>
